<template>
  <div>
    <el-dialog title="添加管理员" :visible.sync="addVisible" width="30%" :before-close="closeAddManager" @open="opendEnd">
    		<el-form :model="managerInfo" ref="addManager" label-width="100px">

          <el-form-item label="收货人" prop="consigneeName" :rules="[
                { required: true, message: '请输入收货人姓名', trigger: 'blur' },
              ]">
          	<el-input type="text" v-model="managerInfo.consigneeName" placeholder="请输入收货人姓名"
            clearable></el-input>
          </el-form-item>

          <el-form-item label="手机号码" prop="phoneNum" :rules="[
                { required: true, message: '请输入手机号码', trigger: 'blur' },
              ]">
          	<el-input type="text" v-model="managerInfo.phoneNum" placeholder="请输入手机号码"
            clearable maxlength="11" show-word-limit></el-input>
          </el-form-item>

          <el-form-item label="收货地址" prop="address" :rules="[
                { required: true, message: '请输入收货地址', trigger: 'blur' },
              ]">
          	<el-input type="textarea" v-model="managerInfo.address" placeholder="请输入收货地址"
            clearable maxlength="50" show-word-limit :autosize="{ minRows: 2, maxRows: 5}"></el-input>
          </el-form-item>

          <el-form-item prop="sysUserName" label="用户名"  width="200" :rules="[
                { required: true, message: '请选择隶属的用户名', trigger: 'blur' },
              ]">
            <template>
              <el-select v-model="managerInfo.sysUserName" placeholder="请选择隶属的用户名">
              	<el-option v-for="item in sysUserOptionsOfadd" :key="item.userId" :label="item.userCode" :value="item.userId">
              	</el-option>
              </el-select>
            </template>
          </el-form-item>
    		</el-form>
    		<span slot="footer" class="dialog-footer">
    			<el-button @click="closeAddManager">取 消</el-button>
    			<el-button type="primary" @click="addManager('addManager')">确 定</el-button>
    		</span>
    	</el-dialog>
    </div>
</template>

<script>
  export default {
  	name: "",
  	props: ["addVisible","sysUserOptions"],
  	data() {
  		return {
  			managerInfo: {
          consigneeName:"",
          phoneNum:"",
          address:"",
          sysUserName:"",
  			},
        sysUserOptionsOfadd:{},
  		}
  	},
    methods: {
      //需要等待dialog 打开完毕后 在金数据渲染
      //设置权限下拉框的默认值
      opendEnd(){
        //渲染下拉框内的数据
        this.sysUserOptionsOfadd = this.$props.sysUserOptions
      },
      //清除文本框数据，返回相对应文本框的值
      clearData(){
        this.managerInfo={
          consigneeName:"",
          phoneNum:"",
          address:"",
          sysUserName:"",
        },
        this.opendEnd()
      },
      //设置关闭添加页面方法
    	closeAddManager() {
        this.clearData()
    		this.$parent.addVisible = false
    	},
      //执行添加方法
      addManager(params) {
        var self = this
        this.$refs[params].validate((valid) => {
        	if (valid) {
        		var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
            //设置手机号正则验证
            var phoneRule = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            // 检测输入的数据中是否存在空格
            var consigneeName = this.managerInfo.consigneeName
            var phoneNum = this.managerInfo.phoneNum
            if(consigneeName.split(" ").length==1){
              if(phoneNum.split(" ").length==1){
                if(phoneRule.test(phoneNum)) {
                  self.$http({
                    url: "/api/CakeShop/MemberInfo/addConsignee",
                    method: "post",
                    headers: {
                      token: onlineManager.token
                    },
                    data: {
                      consignee:{
                        consigneeName: self.managerInfo.consigneeName,
                        phoneNum:self.managerInfo.phoneNum,
                        address: self.managerInfo.address,
                        sysUser:{
                          userId:self.managerInfo.sysUserName
                        }
                      }
                    },
                  }).then(function(res) {
                    console.log(res)
                    // if(res.data.exist===0){
                      if (res.data.udpSuccNum>0) {
                        self.$message({
                          message: res.data.msg,
                          type: 'success',
                          onClose: function() {
                            //添加完毕后清楚文本框中内容
                            self.clearData()
                            //关闭修改界面
                            self.closeAddManager()
                            //添加完数据返回首页
                            self.$parent.getMemberList(sessionStorage.getItem("page"))
                          }
                        });
                      }
                    // }else{
                    //   self.$message({
                    //     duration: 1500,
                    //     message: res.data.msg,
                    //     type: "error",
                    //     onClose: function() {
                    //       self.loading = false;
                    //     },
                    //   });
                    // }
                  })
                }else{
                  self.$message({
                    duration: 1500,
                    message: "手机号码不符合规格!",
                    type: "error",
                    onClose: function() {
                      self.loading = false;
                    },
                  });
                }
              }else{
                self.$message({
                  duration: 1500,
                  message: "收货人姓名中存在非法字符空格!",
                  type: "error",
                  onClose: function() {
                    self.loading = false;
                  },
                });
              }
            }else{
              self.$message({
                duration: 1500,
                message: "电话号码中存在非法字符空格!",
                type: "error",
                onClose: function() {
                  self.loading = false;
                },
              });
            }
        	} else {
        		console.log('error submit!!');
        		return false;
        	}
        });
      }
    }
  }
</script>

<style>
</style>
